import { computed } from 'vue'
import { PC_DEVICE_WIDTH } from '@/constants'
import { useWindowSize } from '@vueuse/core'
// useWindowSize 会动态返回当前窗口的尺寸 通过点value的方式拿到尺寸
const { width, height } = useWindowSize()

// export const isMobileTerminal = computed(() => {
//   // 因为 document.documentElement.clientWidth 不是响应式数据，所以computed无法动态计算
//   //   return PC_DEVICE_WIDTH > document.documentElement.clientWidth
//   return PC_DEVICE_WIDTH > width.value
// })
export const isMobileTerminal = computed(() => {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
})
export const useREM = () => {
  // 规定最大字号值为 40px
  const MAX_FONT_SIZE = 40
  // 监听 html 文档被解析完毕的事件
  window.addEventListener('DOMContentLoaded', () => {
    const html = document.querySelector('html')
    // 获取当前用户屏幕比10
    let fontSize = window.innerWidth / 10
    fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
    // 设置 html 根节点的字号大小
    html.style.fontSize = fontSize + 'px'
  })
}
